<template>
  <view class="main">
    <view class="content">
      <view class="user dispaly-center" @click="$goUrl('/subPackage/mine/userInfo')"
        v-if="JSON.stringify(userInfo) != '{}'">
        <view class="avatar">
          <image :src="userInfo.avatar" mode="aspectFill" />
        </view>
        <view class="info dispaly-column-between">
          <view class="name">{{ userInfo.nickName }}</view>
          <view class="tel">{{ userInfo.phonenumber }}</view>
        </view>
      </view>
      <view v-else class="log" @click="$goUrl('/subPackage/mine/login')">登录</view>
      <view class="money common">
        <view class="title dispaly-center" @click="$goUrl('/subPackage/mine/myMoney')">
          <view class="title-text">我的余额</view>
          <nut-icon size="10" custom-color="#777777" name="rect-right"></nut-icon>
        </view>
        <view class="money-box dispaly-just-between">
          <view class="num">{{ userInfo.balance || 0 }}</view>
          <view class="op dispaly-align-center" @click="$goUrl('/subPackage/mine/withdraw')">提现</view>
        </view>
        <view class="b">
          <image src="/static/mine/tx.png" mode="aspectFill" />
        </view>
      </view>
      <view class="option common" v-for="(item, index) in mineOptionList" :key="index">
        <view class="o-title dispaly-center">
          <view class="line"></view>
          <view class="o-name">{{ item.name }}</view>
        </view>
        <view class="list dispaly-just-between" :class="{ 'p':  item.type == 2 , 'p1': item.type == 1}" >
          <view class="item dispaly-col-center" v-for="(v, i) in item.list" :key="i" @click="clickItem(v)">
            <view class="item dispaly-col-center" v-if="v.type != 'zx'">
              <image :src="v.icon" mode="aspectFill" />
              <view class="o-n">{{ v.name }}</view>
            </view>
            <button open-type="contact" class="dispaly-col-center" :class="{ 'b-b': v.type == 'zx' }"
              v-if="v.type == 'zx'">
              <view class="dispaly-col-center k">
                <image class="im" :src="v.icon" mode="aspectFill" />
                <view class="o-n1">{{ v.name }}</view>
              </view>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>

  <nut-popup position="bottom" round :custom-style="{ height: 'auto' }" v-model:visible="isVisible">
    <view class="bs">
      <view class="ops">
        <view class="btn-items" v-for="item in menuItems" :key="item.type">
          <button :open-type="item.type == 1 ? 'share' : ''" @click="clickItemOp(item)">{{ item.name }}</button>
        </view>
        <view class="ss"></view>
        <view class="btn-items " @click="isVisible = false">
          <button>取消</button>
        </view>
      </view>
    </view>
  </nut-popup>

  <nut-overlay v-model:visible="showO" z-index="9999" :close-on-click-overlay="false">
    <view class="wrapper" v-if="JSON.stringify(detail) != '{}'"
      style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
      <view class="c" @click="showO = false" v-if="showO">
        <image src="/static/icon/c.png" />
      </view>
      <nut-button v-if="!showHB" custom-color="#d76457" :loading="!showHB" type="success">海报加载中{{ progressNum }}
        %</nut-button>
      <l-painter @progress="progress" ref="painter" v-if="showO" css="height:818rpx;width:512rpx">
        <l-painter-view css=" width: 750rpx;height: 100%;">
          <l-painter-image :src="hbPicture"
            css="width: 512rpx;height: 512rpx;borderTopLeftRadius: 20rpx;borderTopRightRadius: 20rpx;object-fit: cover;" />
          <l-painter-view
            css="background: #fff;width: 512rpx; height: 306rpx;borderBottomLeftRadius:20rpx;borderBottomRightRadius:20rpx">
            <l-painter-view css="width: 512rpx;height: 68rpx;lineHeight:68rpx;marginTop:30rpx;textAlign:center">
              <l-painter-image :src="hb" css="height: 200rpx;width:200rpx;" />
            </l-painter-view>
          </l-painter-view>
        </l-painter-view>
      </l-painter>
      <view v-if="showO" class="save dispaly-align-center" @click="sava()">保存图片</view>
    </view>
  </nut-overlay>
</template>

<script setup>
import { mineOptionList } from '@/config/base'
import { ref, nextTick } from 'vue';
import { onShareAppMessage, onShareTimeline, onLoad, onShow } from '@dcloudio/uni-app';
import { getUserInfo, userHb, proxy } from '@/api/apiList';
import { saveImage } from '@/utils/util'

const userInfo = ref({})
const getUser = async () => {
  const res = await getUserInfo()
  if (res.code == 200) {
    userInfo.value = res.data
    uni.setStorageSync('user', userInfo.value)
  }
}

// 获取海报
let hb = ref('')
const getUserHb = async () => {
  uni.showLoading({
    title: '加载中'
  })
  const res = await userHb()
  if (res.code == 200) {
    hb.value = res.msg
    uni.hideLoading()
  }
}

// 获取海报封面图
const hbPicture = ref('')
const getHbPictureImage = async () => {
  const res = await proxy('poster')
  if (res.code == 200) {
    hbPicture.value = res.msg
  }
}

// 保存海报
const painter = ref(null)
const sava = () => {
  nextTick(() => {
    painter.value.canvasToTempFilePathSync({
      fileType: "png",
      // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
      pathType: 'base64',
      quality: 1,
      success: (res) => {
        saveImage(res.tempFilePath)
      },
    })
  })
}

let progressNum = ref(0)
let showHB = ref(false)
const progress = (data) => {
  progressNum.value = parseInt((data * 100))
  showHB.value = data == 1 ? true : false
}

onShow(() => {
  if (isGetUSer.value) getUser()
})

let isGetUSer = ref(true)
onLoad((option) => {
  getHbPictureImage()
  if (option.isVisible) {
    if (!uni.getStorageSync('token')) {
      uni.showToast({
        title: '您还未登录',
        icon: 'none'
      })
    } else {
      isVisible.value = option.isVisible
    }
  }
  if (option.scene || option.userId) {
    isGetUSer.value = false
    let opData = decodeURIComponent(option.scene).split('&')
    let userId = option.userId || opData[0].split('=')[1]
    uni.showModal({
      title: "提示",
      content: "登录加入团队",
      success: function (res) {
        if (res.confirm) {
          uni.navigateTo({
            url: `/subPackage/mine/login?userId=${userId}&isL=1`,
          });
          isGetUSer.value = true
        }
      },
    });
  }
})

let showO = ref(false)
let shareTitle = uni.getStorageSync('shareTitle')
onShareAppMessage(() => {
  return {
    path: `/pages/mine/mineIndex?userId=${userInfo.value.userId}`,
    title: shareTitle
  };
});

onShareTimeline(() => {
  return {
    path: `/pages/mine/mineIndex?userId=${userInfo.value.userId}`,
    title: shareTitle
  };
});

const clickItem = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  } else {
    if (item.type == 'fx') {
      if (uni.getStorageSync('token')) {
        isVisible.value = true
      } else {
        uni.showToast({
          title: '您还未登录',
          icon: 'none'
        })
      }
    }
  }
}

const clickItemOp = async (item) => {
  isVisible.value = false
  if (item.type == 2) {
    await getUserHb()
    showO.value = true
  }
}


const isVisible = ref(false)
const menuItems = [
  {
    name: '分享赚佣金',
    type: 1
  },
  {
    name: '生成海报',
    type: 2
  }
];

</script>

<style>
page {
  background: rgb(255, 212, 212);
  background: linear-gradient(148deg, rgba(255, 212, 212, 1) 0%, rgba(246, 246, 246, 1) 44%, rgba(246, 246, 246, 1) 100%);

}
</style>

<style lang="scss" scoped>
.b-b {
  .k {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 110rpx;
    .im {
      width: 47rpx !important;
      height: 47rpx !important;
      padding-top: 16rpx;
    }
    .o-n1 {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 23rpx;
      color: #111111;
      height: 30rpx;
      display: flex;
      align-items: flex-end;
    }
  }

}

.log {
  font-size: 40rpx;
  margin: 20rpx 0;
}

button {
  padding: 0;
  margin: 0;
  background-color: transparent;
}

button::after {
  border: none;
}

.bs {
  background-color: #f8f8f8;

  .ops {
    background-color: #fff;

    .ss {
      height: 20rpx;
      width: 100%;
      background-color: #f8f8f8;
    }

    .btn-items {
      padding: 39rpx 0;
      border-bottom: 1rpx solid #f8f8f8;

      button {
        border: none;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
        background-color: #fff;
      }
    }
  }
}

.common {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
}

.p {
  padding: 0 79rpx;
}
.p1 {
  padding: 0 39rpx;
}

.main {
  .content {
    padding: 61rpx 30rpx 0 30rpx;

    .user {
      margin-bottom: 30rpx;

      .avatar {
        margin-right: 30rpx;

        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
        }
      }

      .info {
        height: 104rpx;

        .name {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #000000;
        }

        .tel {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #000000;
        }
      }
    }

    .money {
      position: relative;

      .b {
        position: absolute;
        right: 41rpx;
        top: -60rpx;

        image {
          width: 111rpx;
          height: 115rpx;
        }
      }

      .title {
        margin-bottom: 30rpx;

        .title-text {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #555555;
        }
      }

      .money-box {
        .num {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 72rpx;
          color: #000000;
        }

        .op {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;
          width: 122rpx;
          height: 56rpx;
          background: #FB4E47;
          border-radius: 28rpx;
        }
      }
    }

    .option {
      .o-title {
        margin-bottom: 34rpx;

        .line {
          width: 8rpx;
          height: 24rpx;
          background: radial-gradient(#FB4E47 0%, #FFFFFF 100%);
          border-radius: 4rpx;
          margin-right: 10rpx;
        }

        .o-name {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #111111;
        }
      }



      .list {
        box-sizing: border-box;
        .item {
          image {
            width: 47rpx;
            height: 47rpx;
          }

          .o-n {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #111111;
            margin-top: 5rpx;

          }
        }
      }
    }
  }
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;

  .save {
    width: 284rpx;
    height: 66rpx;
    border-radius: 33rpx;
    border: 2rpx solid #FFFFFF;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 26rpx;
    color: #FFFFFF;
    margin-top: 40rpx;
  }

  .c {
    width: 512rpx;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20rpx;

    image {
      width: 46rpx;
      height: 46rpx;
    }
  }
}

.hb {
  image {
    width: 512rpx;
    height: 784rpx;
  }
}
</style>